<template>
  <div class="ks">
    <div class="flow" @click="cancel">
      <transition name="flow">
        <div class="info" v-show="flowState"><span><b>李复</b>邀请<b>你、沈剑心、墨雨</b>加入群聊</span></div>
      </transition>
      <div class="flow-inner">
        <ul class="items">
          <transition-group name="flow">
            <li :class="['item',item.from==1?'right':'left']" v-for="(item, index) in flowDataDisplay" :key="index">
              <div class="item-avatar"><i :style="{backgroundImage:'url('+item.avatar+')'}"></i></div>
              <div class="item-main">
                <div class="name">{{item.name}}</div>
                <div class="content">
                  <span v-if="item.content">
                    <i v-html="item.content"></i><br>
                    <div v-if="item.button==1" class="button share" @click="share">那就比一比</div>
                    <div v-if="item.button==2" class="button replay" @click="replay">我要补考</div>
                  </span>
                  <img @click="outlook" v-if="item.img" :src="item.img" alt="img">
                </div>
              </div>
            </li>
          </transition-group>
        </ul>
      </div>
    </div>
    <div :class="['panel',inputWait?'act':'']" @click="pull"></div>
    <transition name="up">
      <div v-if="popIndex==2" class="pop-core">
        <div class="help" v-if="helpWait&&helpIndex<4" @click="help"></div>
        <ul class="answers">
          <li @click="select(index,item)" v-for="(item, index) in answer" :key="index">
            {{String.fromCharCode(64+parseInt(index+1))+'. '}}{{item}}
          </li>
        </ul>
      </div>
    </transition>
    <div v-if="popIndex==3" class="pop-outlook">
      <div class="close" @click="close"></div>
      <img id="result" style="opacity:0" src="static/core_level_test.jpg" alt="level">
      <canvas2img></canvas2img>
    </div>
  </div>
</template>

<script>
import store from '@/store'
import flowData from '../assets/data/flow.json'
import canvas2img from './canvas2img.vue'
export default {
  components: {
    canvas2img
  },
  data () {
    return {
      flowState: false,
      flowData: [],
      flowDataDisplay: [],
      flowStep: 1000,
      inputBoxData: [
        '浩气都是二百五',
        '从此队友成白骨',
        '冷漠的女人成一双',
        '上香里边请'
      ],
      inputWait: false,
      inputState: false,
      questionIndex: 0,
      questionRange: 5,
      score: 0,
      helpIndex: 0,
      helpWait: false,
      userInfo: {
        name: '江湖小虾米',
        avatar: './static/core_user.jpg'
      },
      flowInfo: {
        right: '<img style="height:14px;width:14px;position:relative;top:-3px;left:8px;transform:scale(1.5);" src="static/core_judge_right.jpg"><br>',
        wrong: '<img style="height:14px;width:14px;position:relative;top:-3px;left:8px;transform:scale(1.5);" src="static/core_judge_wrong.jpg"><br>'
      }
    }
  },
  computed: {
    questions: function () {
      if (this.flowData.question) {
        let array = []
        let result = []
        for (let i = 0; i < this.questionRange; i++) {
          let random = parseInt(Math.random() * this.flowData.question.length)
          let newF = true
          for (let i = 0; i < array.length; i++) {
            if (array[i] == random) {
              newF = false
              this.questionRange++
            }
          }
          if (newF) {
            array.push(random)
            result.push(this.flowData.question[random])
          }
        }
        console.log(result)
        return result
      } else {
        return null
      }
    },
    question: function () {
      if (this.questions) {
        return this.questions[this.questionIndex]
      } else {
        return {}
      }
    },
    answer: function () {
      if (this.flowData.answer) {
        let answers = []
        for (let i = 0; i < 3; i++) {
          let random = this.flowData.answer[parseInt(Math.random() * this.flowData.answer.length)]
          answers.push(random)
        }
        answers.push(this.question.answer)
        return this.resortArray(answers)
      }
    },
    popIndex: () => store.state.popIndex
  },
  watch: {
    questionIndex: function (nv, ov) {
      setTimeout(() => {
        this.ask()
      }, this.flowStep * 2.5)
    },
    popIndex: function (nv, ov) {
      if (nv == 0 && !this.inputState) this.inputWait = true
    }
  },
  methods: {
    init () {
      this.flowData = flowData
      setTimeout(() => {
        this.flowState = true
      }, this.flowStep);
      setTimeout(() => {
        this.flow(0, 2)
      }, this.flowStep * 1.5);
    },
    add (from, content, img, button) {
      let item = {
        content: content
      }
      if (img) {
        item.img = img
      }
      if (button) {
        item.button = button
      }
      switch (from) {
        case 0:
          item.from = 0
          item.name = this.flowData.npc[0].name
          item.avatar = this.flowData.npc[0].avatar
          break
        case 1:
          item.from = 1
          item.name = this.userInfo.name
          item.avatar = this.userInfo.avatar
          break
        case 2:
          item.from = 0
          item.name = this.flowData.npc[1].name
          item.avatar = this.flowData.npc[1].avatar
          break
        case 3:
          item.from = 0
          item.name = this.flowData.npc[2].name
          item.avatar = this.flowData.npc[2].avatar
          break
        case 4:
          item.from = 0
          item.name = this.flowData.npc[3].name
          item.avatar = this.flowData.npc[3].avatar
          break
      }
      this.flowDataDisplay.push(item)
      this.toBotom()
    },
    help () {
      if (this.helpIndex <= 5 && this.helpWait) {
        this.add(1, '大侠给个提示吧 @沈剑心')
        switch (this.helpIndex) {
          case 0:
            setTimeout(() => {
              this.add(2, '帮你一次，下不为例：<br>' + this.question.quest + ' <b style="color:red;border-bottom:1px solid red">' + this.question.answer + '</b>')
            }, this.flowStep);
            break
          case 1:
            setTimeout(() => {
              this.add(0, '薅头发警告')
            }, this.flowStep);
            break
          case 2:
            setTimeout(() => {
              this.add(0, '再問就薅秃')
            }, this.flowStep);
            break
          case 3:
            setTimeout(() => {
              this.add(0, '来人呐！！薅秃！')
              setTimeout(() => {
                this.add(2, '', './static/core_help_result.jpg ')
              }, this.flowStep);
            }, this.flowStep);
            break
        }
        this.helpIndex++
        this.inputWait = true
        this.helpWait = false
        store.commit('setState', { key: 'popIndex', val: 0 })
      }
    },
    toBotom () {
      document.body.scrollTo(0, document.body.clientHeight)
      setTimeout(() => {
        document.documentElement.scrollTop = document.body.clientHeight
      }, 100);
    },
    flow (from, to) {
      if (to) {
        let array = this.flowData.context.slice(from, to + 1)
        for (let i = 0; i < array.length; i++) {
          setTimeout(() => {
            this.add(array[i].from, array[i].content, array[i].img, array[i].button)
            // if (array[i].img) {
            // } else {
            //   this.add(array[i].from, array[i].content)
            // }
          }, this.flowStep * i);
        }
        if (from == 0) {
          setTimeout(() => {
            this.ask()
          }, this.flowStep * array.length * 1.5);
        }
      } else {
        this.add(this.flowData[from].from, this.flowData[from].content)
      }
    },
    pull () {
      if (this.inputWait) {
        this.inputWait = false
        store.commit('setState', { key: 'popIndex', val: 2 })
      }
    },
    select (index, content) {
      store.commit('setState', { key: 'popIndex', val: 0 })
      this.inputState = true
      this.add(1, content)
      setTimeout(() => {
        this.judge(content)
      }, this.flowStep);
    },
    judge (content) {
      this.inputState = false
      let result = true
      if (content == this.question.answer) {
        this.score++
        this.add(0, '正确' + this.flowInfo.right + '你已经答对了<b style="color:red;margin:0 3px;">' + this.score + '</b>道题')
      } else {
        this.add(0, '回答错误' + this.flowInfo.wrong + '你已经答对了<b style="color:red;margin:0 3px;">' + this.score + '</b>道题')
        result = false
        setTimeout(() => {
          this.add(3, this.question.quest + ' <b style="color:red;border-bottom:1px solid red">' + this.question.answer + '</b>')
        }, this.flowStep);
      }
      if (this.questionIndex < 4) {
        if (result) this.questionIndex++
        else {
          setTimeout(() => {
            this.questionIndex++
          }, this.flowStep * 1.5);
        }
      } else {
        setTimeout(() => {
          this.flow(3, 8)
        }, this.flowStep * 1.5);
      }
    },
    ask () {
      this.inputWait = true
      this.helpWait = true
      if (this.question.quest.match(/___/)) {

        this.add(0, this.question.quest)
      } else {
        this.add(0, this.question.quest + ' ____')
      }
    },
    cancel () {
      this.inputWait = true
    },
    randomArray (length) {
      let i, index, temp
      let arr = [length]
      for (i = 1; i <= length; i++) {
        arr[i - 1] = i
      }
      for (i = 1; i <= length; i++) {
        index = parseInt(Math.random() * (length - i)) + i
        if (index !== i) {
          temp = arr[i]
          arr[i] = arr[index]
          arr[index] = temp
        }
      }
      return arr
    },
    resortArray (oraginList) {
      let randomIndex = this.randomArray(oraginList.length)
      var targetList = []
      for (let index = 0; index < randomIndex.length; index++) {
        const element = randomIndex[index] - 1
        targetList.push(oraginList[element])
      }
      return targetList
    },
    outlook () {
      store.commit('setState', { key: 'popIndex', val: 3 })
    },
    close () {
      store.commit('setState', { key: 'popIndex', val: 0 })
    },
    share () {
      store.commit('setState', { key: 'popIndex', val: 4 })
    },
    replay () {
      window.location.reload()
    },
    geneImg () {
    }
  },
  mounted () {
    this.init()
  }
}
</script>
<style lang='stylus' scoped>
@import '../assets/styles/index.styl'
.ks {
  .flow {
    box-sizing border-box
    padding 15px
    .flow-inner {
      padding-bottom 50px
    }
  }
  .info {
    text-align center
    span {
      font-size 12px
      color co4
      b {
        font-weight normal
        margin 3px
        color co6
      }
    }
  }
  .items {
    .item {
      margin 25px 0
      overflow hidden
      .item-avatar {
        float left
        display inline-block
        width 30px
        i {
          height 30px
          width 30px
          display inline-block
          background-color co2
          background-image url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRVgPqdgXvOvq9cWtCs5sWD1UYKQwhEElXsMTaWusukVUzpvjzG9Q')
          background-size cover
          background-repeat no-repeat
          background-position center
          border-radius 50%
        }
      }
      .item-main {
        width calc(100% - 50px)
        float left
        display inline-block
        box-sizing border-box
        padding 0 20px 0 10px
        position relative
        top -3px
        .name {
          display inline-block
          margin-bottom 5px
          font-size 12px
          color co7
        }
        .content {
          box-sizing border-box
          position relative
          &:before {
            content ''
            display inline-block
            position absolute
            top 35%
            left -10px
            transform translateY(-50%)
            border 5px solid transparent
            border-right 6px solid #fff
            display none
          }
          span {
            border-radius 15px
            border-top-left-radius 0px
            padding 12px
            display inline-block
            background #fff
            .button {
              color co6
              border 1px solid co6
              display inline-block
              border-radius 30px
              padding 5px 15px
              margin-top 10px
              &.replay {
                color co8
                border 1px solid co8
              }
            }
          }
          img {
            height 120px
            width auto
          }
        }
      }
      &.right>div {
        text-align right
        float right
        &.item-avatar {
          i {
            background-image url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT6NkmCIh-O_wuf_qy-HYjeuxzwasLoOgjsUARndkT-JpE7jbJnFw')
          }
        }
        &.item-main {
          padding 0 10px 0 20px
          .content {
            &:before {
              left unset
              right -5px
              border-right 0px
              border-left 6px solid co1
            }
            span {
              border-radius 15px
              border-top-right-radius 0px
              text-align left
              background co1
              color #fff
            }
          }
        }
      }
    }
  }
  .panel {
    position fixed
    bottom 0
    left 0
    height 80px
    width 100%
    background #fff
    background-image url('../assets/images/core_panel.jpg')
    background-size contain
    background-position center 10px
    background-repeat no-repeat
    transform scale(1)
    &.act {
      animation panelAct 1000ms ease infinite
    }
  }
}
.pop-core {
  position fixed
  bottom 0
  width 100%
  padding 10px
  box-sizing border-box
  z-index 200
  .answers {
    li {
      border-radius 5px
      margin 5px 0
      background #fff
      padding 15px
    }
  }
  .help {
    position absolute
    height 120px
    width 60px
    top -115px
    left 25px
    background-image url('../assets/images/pop_core_help.png')
    background-size contain
    background-position center
    background-repeat no-repeat
  }
}
.pop-outlook {
  position fixed
  top 0
  left 0
  z-index 200
  background-image url('../assets/images/core_texture.jpg')
  background-size contain
  background-position top left
  height 100vh
  .close {
    z-index 300
    position absolute
    right 15px
    top 15px
    height 25px
    width 25px
    transform rotate(45deg)
    &:before, &:after {
      content ''
      display inline-block
      height 1px
      width 100%
      background #fff
      position absolute
      top 50%
      left 50%
      transform translate(-50%, -50%)
    }
    &:before {
      transform translate(-50%, -50%) rotate(90deg)
    }
  }
  &:before {
    z-index 300
    content '截图或长按保存成绩单'
    position absolute
    bottom 10%
    left 50%
    transform translateX(-50%)
    font-size 18px
    white-space nowrap
    opacity 0.6
    color #fff
    animation resultTip 1s ease infinite
  }
}
@keyframes panelAct {
  0% {
    transform scale(1)
  }
  50% {
    transform scale(1.05)
  }
  100% {
    transform scale(1)
  }
}
@keyframes resultTip {
  0% {
    opacity 0.6
  }
  50% {
    opacity 0.1
  }
  100% {
    opacity 0.6
  }
}
</style>